<template>
    <!-- <div>弃用页面</div> -->
    <el-dialog
        :title="!dataForm.id ? $t('handle.add') : $t('handle.update')"
        :close-on-click-modal="false"
        :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120PX">
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="楼栋全称" prop="fullName">
                <el-input v-model="dataForm.fullName" placeholder="楼栋全称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="简称" prop="shortName">
                <el-input v-model="dataForm.shortName" placeholder="简称"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="所属小区" prop="">
                <el-cascader style="width: 100%;" v-model="housEasteAddress" ref="housing" @click.native="getOne" :options="housEasteOptions" @active-item-change="getHousEaste" :props="housEasteProps"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属网格" prop="">
                <el-cascader style="width: 100%;" v-model="address" ref="gridding" :options="options" @click.native="getCountry" @active-item-change="getNodes" :props="props"></el-cascader>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="单元号" prop="unitNumber">
                <el-input v-model="dataForm.unitNumber" placeholder="单元号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼层数" prop="floorNumber">
                <el-input v-model="dataForm.floorNumber" placeholder="楼层数"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="最高居住楼层" prop="highestLivingFloor">
                <el-input v-model="dataForm.highestLivingFloor" placeholder="最高居住楼层"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最低居住楼层" prop="lowestLivingFloor">
                <el-input v-model="dataForm.lowestLivingFloor" placeholder="最低居住楼层"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="物管联系人" prop="manageName">
                <el-input v-model="dataForm.manageName" placeholder="物管联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物管联系电话" prop="managePhone">
                <el-input v-model="dataForm.managePhone" placeholder="物管联系电话"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="楼栋用途" prop="purpose">
               <el-select style="width: 100%;" v-model="dataForm.purpose" filterable placeholder="请选择">
                    <el-option v-for="item in purposeDicts" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="楼栋所在地址" prop="dgStandardInfoId">
                <el-input v-model="dataForm.dgStandardInfoId" placeholder="楼栋所在地址"></el-input>
            </el-form-item> -->
          </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="callOf()">{{ $t('handle.cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{ $t('handle.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {isMobile} from '@/utils/validate'
export default {
    data(){
        // 手机号验证
        var validateMobile = (rule, value, callback) => {
            if (!isMobile(value)) {
            callback(new Error('手机号格式错误'))
            } else {
            callback()
            }
        }
        return {
            visible: false,
            dataForm: {
                id: '',
                fullName: '',
                shortName: '',
                housingEstateId: '',
                unitNumber: '',
                floorNumber: '',
                lowestLivingFloor: '',
                highestLivingFloor: '',
                purpose: '',
                manageName: '',
                managePhone: '',
                dgStandardInfoId: ''
            },
            address: [],
            options: [],
            props: {
                value: "id",
                label: "name",
                children: "children"
            },
            housEasteAddress: [],
            housEasteOptions: [],
            housEasteProps: {
                value: "id",
                label: "name",
                children: "children"
            },
            purposeDicts: [],
            dataRule: {
                fullName: [
                     { required: true, message: '楼栋全称不能为空', trigger: 'blur' }
                ],
                shortName: [
                     { required: true, message: '简称不能为空', trigger: 'blur' }
                ],
                // housingEstateId: [
                //      { required: false, message: '所属小区不能为空', trigger: 'change' }
                // ],
                unitNumber: [
                     { required: true, message: '单元号不能为空', trigger: 'blur' }
                ],
                floorNumber: [
                     { required: true, message: '楼层数不能为空', trigger: 'blur' }
                ],
                lowestLivingFloor: [
                     { required: true, message: '最低居住层数不能为空', trigger: 'blur' }
                ],
                highestLivingFloor: [
                     { required: true, message: '最高居住层数不能为空', trigger: 'blur' }
                ],
                purpose: [
                     { required: true, message: '楼栋用途不能为空', trigger: 'blur' }
                ],
                manageName: [
                     { required: true, message: '物管联系人不能为空', trigger: 'blur' }
                ],
                managePhone: [
                    { required: true, message: '物管联系电话不能为空', trigger: 'blur' },
                    { validator: validateMobile, trigger: 'blur' }
                ],

            }
        }
    },
    /*弹窗就会执行的函数 */
    mounted: function(){
        // this.getCountry()
        // this.getOne()
    },
    methods: {
        // 小区选择
        getHousEaste(val){
            if(val.length === 1){// 获取省
                this.getTwo(val[0])
            }else if(val.length === 2){// 市
                this.getThree(val[0],val[1])
            }else if(val.length === 3){// 区
                this.getFour(val[0],val[1],val[2])
            }else if(val.length === 4){
                this.getFive(val[0],val[1],val[2],val[3]) //社区
            }else if(val.length === 5){
                this.getSix(val[0],val[1],val[2],val[3],val[4])// 小区
            }
        },
        // 一级
        getOne(){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: 0,type:11}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.housEasteOptions = data.data

                }
            })
        },
        // 二级
        getTwo(countryId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: countryId,type:12}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                   this.housEasteOptions.map(item=>{
                       if(item.id === countryId){
                           item.children = data.data
                       }
                   })
                }
            })
        },
        getThree(countryId,provinceId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: provinceId,type:13}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                   this.housEasteOptions.map((item, i) => {
                        if (item.id === countryId) {
                            item.children.map((city, id) => {
                                 city.children = data.data;
                            });
                        }
                    });
                }
            })
        },
        getFour(countryId,provinceId,cityId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: cityId,type:31}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.housEasteOptions.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    city.children = data.data
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        getFive(countryId,provinceId,cityId,areaId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: areaId,type:32}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.housEasteOptions.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                  if(city.id === cityId){
                                    city.children.map((area,aid)=>{
                                      area.children =data.data
                                    })
                                  }
                                });
                            }
                        });
                        }
                    });
                }
            })
        },
        getSix(countryId,provinceId,cityId,areaId,communityCodeId){
            this.$http({
                url: `/dg-ic/ic/housing-estate/getByCommuntId/${communityCodeId}`,
                method: 'get'
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        // this.$set(item, "children", []);
                    });
                    this.housEasteOptions.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    if(city.id === cityId){
                                        city.children.map((area,aid)=>{
                                            if(area.id === areaId){
                                                area.children.map((communt,ic)=>{
                                                    communt.children = data.data
                                                })
                                            }
                                        })
                                    }
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        // 网格选择
        getNodes(val){
            if(val.length === 1){// 获取省
                this.getProviceCode(val[0])
            }else if(val.length === 2){// 根据省份获取市
                this.getCityCode(val[0],val[1])
            }else if(val.length === 3){// 区
                this.getAreaCode(val[0],val[1],val[2])
            }else if(val.length === 4){
                this.getCommunityCode(val[0],val[1],val[2],val[3])
            }else if(val.length === 5){
                this.getNeighborhoodCommitteeCode(val[0],val[1],val[2],val[3],val[4])
            }else if(val.length === 6){
                this.getGridding(val[0],val[1],val[2],val[3],val[4],val[5])
            }
        },

        // 省
        getCountry(){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: 0,type:11}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.options = data.data

                }
            })
        },
        // 获取市
        getProviceCode(countryId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: countryId,type:12}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                   this.options.map(item=>{
                       if(item.id === countryId){
                           item.children = data.data
                       }
                   })
                }
            })
        },
        // 获取区
        getCityCode(countryId,provinceId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: provinceId,type:13}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                   this.options.map((item, i) => {
                        if (item.id === countryId) {
                            item.children.map((city, id) => {
                                 city.children = data.data;
                            });
                        }
                    });
                }
            })
        },
        // 社区
        getAreaCode(countryId,provinceId,cityId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: cityId,type:31}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.options.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    city.children = data.data
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        // 获取居委会
        getCommunityCode(countryId,provinceId,cityId,areaId){
            this.$http({
                url: `/dg-standard-info/dgstandardaddress/childlistbyparentandtype`,
                method: 'post',
                params:{parentId: areaId,type:32}
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        this.$set(item, "children", []);
                    });
                    this.options.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    if(city.id === cityId){
                                        city.children.map((area,aid)=>{
                                             area.children = data.data
                                        })
                                    }
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        // 获取居委会 社区id
        getNeighborhoodCommitteeCode(countryId,provinceId,cityId,areaId,communityCodeId){
            this.$http({
                 url: `/dg-ic/ic/gridding/getByneighborhoodCommitteeCodeId/${communityCodeId}`,
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        // this.$set(item, "children", []);
                    });
                    this.options.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    if(city.id === cityId){
                                        city.children.map((area,aid)=>{
                                            if(area.id === areaId){
                                                area.children.map((communt,ic)=>{
                                                    communt.children = data.data
                                                })
                                            }
                                        })
                                    }
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        getGridding(countryId,provinceId,cityId,areaId,communityCodeId,neighborhoodCommitteeCodeId){
            this.$http({
                url: `/dg-ic/ic/gridding/getByneighborhoodCommitteeCodeId/${neighborhoodCommitteeCodeId}`,
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data})=>{
                if(data && data.code === 0){
                    data.data.map(item => {
                        this.$set(item, "name", item.name);
                        // this.$set(item, "children", []);
                    });
                    this.options.map((item, i) => {
                        if (item.id === countryId) {
                        item.children.map((provice, idx) => {
                            if(provice.id === provinceId){
                                provice.children.map((city, ids) => {
                                    if(city.id === cityId){
                                        city.children.map((area,aid)=>{
                                            if(area.id === areaId){
                                                area.children.map((communt,ic)=>{
                                                    if(communt.id === communityCodeId){
                                                        communt.children.map((neighborhoodCommitteeCode,nid)=>{
                                                            neighborhoodCommitteeCode.children = data.data
                                                        })
                                                    }
                                                })
                                            }
                                        })
                                    }
                                });
                            }
                        });
                        }
                    });
                }

            })
        },
        init(id,purposeDicts){
            this.purposeDicts = purposeDicts
            this.visible = true
            this.dataForm.id = id || 0
            if(this.dataForm.id){
                this.$http({
                    url: `/dg-ic/ic/building/info/${this.dataForm.id}`,
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data})=>{
                    if(data && data.code === 0){
                        this.dataForm.fullName = data.data.fullName
                        this.dataForm.shortName = data.data.shortName
                        // this.dataForm.housingEstateId = data.data.housingEstateId
                        this.housEasteOptions = [{
                            id: data.data.housingEstateId,
                            name: data.data.housingName
                        }];
                        this.housEasteAddress = [data.data.housingEstateId];
                        this.dataForm.unitNumber = data.data.unitNumber
                        this.dataForm.floorNumber = data.data.floorNumber
                        this.dataForm.lowestLivingFloor = data.data.lowestLivingFloor
                        this.dataForm.highestLivingFloor = data.data.highestLivingFloor
                        this.dataForm.purpose = String(data.data.purpose)
                        this.dataForm.manageName = data.data.manageName
                        this.dataForm.managePhone = data.data.managePhone
                        // this.dataForm.griddingId = data.data.griddingId
                        this.options = [{
                            id: data.data.griddingId,
                            name: data.data.griddingName
                        }];
                        this.address = [data.data.griddingId];
                        this.dataForm.dgStandardInfoId = data.data.dgStandardInfoId
                    }
                })
            }
        },
        dataFormSubmit(){
             this.$refs['dataForm'].validate((validate)=>{
                 if(validate){
                     this.$http({
                        url: `/dg-ic/ic/building/${!this.dataForm.id ? 'save' : 'update'}`,
                        method: 'post',
                        data: this.$http.adornData({
                            'id': this.dataForm.id || undefined,
                            'fullName': this.dataForm.fullName,
                            'shortName': this.dataForm.shortName,
                            'housingEstateId':this.housEasteAddress[this.housEasteAddress.length-1],
                            'unitNumber': this.dataForm.unitNumber,
                            'floorNumber': this.dataForm.floorNumber,
                            'lowestLivingFloor': this.dataForm.lowestLivingFloor,
                            'highestLivingFloor': this.dataForm.highestLivingFloor,
                            'purpose': this.dataForm.purpose,
                            'manageName': this.dataForm.manageName,
                            'managePhone': this.dataForm.managePhone,
                            'griddingId': this.address[this.address.length-1],
                            'dgStandardInfoId': this.dataForm.dgStandardInfoId,
                            'createBy': this.$store.state.user.id,
                            'updateBy': this.$store.state.user.id
                        })
                     }).then(({data})=>{
                         if(data && data.code === 0){
                            this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                this.$emit('refreshDataList')
                                this.$refs[`dataForm`].resetFields()
                                let obj = {}
                                obj.stopPropagation = () =>{}
                                this.$refs.gridding.clearValue(obj)
                                let obj1 = {}
                                obj1.stopPropagation = () =>{}
                                this.$refs.housing.clearValue(obj1)
                                }
                            })
                         }else{
                            this.$message.console.error(data.msg);
                        }
                     })
                 }
             })
        },

        callOf(){
            this.visible = false
            this.$nextTick(()=>{
                this.$refs['dataForm'].resetFields()
                let obj = {}
                obj.stopPropagation = () =>{}
                this.$refs.gridding.clearValue(obj)
                let obj1 = {}
                obj1.stopPropagation = () =>{}
                this.$refs.housing.clearValue(obj1)
            })
        }
    }

}
</script>

